<template>
    <el-form label-position="left"
           ref="form"
           :model="user"
           :rules="rules"
           label-width="80px">
    <el-form-item label="用户名：" prop="username">
      <el-input v-model="user.username"></el-input>
    </el-form-item>

    <el-form-item label="密码：" prop="password">
      <el-input v-model="user.password"></el-input>
    </el-form-item>

    <el-form-item label="第三方登陆" >
      <a v-bind:href="url">
          <img   src="./weibo.png"  alt="微博登陆" width="30px">
      </a>

    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="login">登录</el-button>
    </el-form-item>
  </el-form>


</template>

<script>
    export default {
        name: "login",
      data:function () {
          return{
            user:{
              "username":"",
              "password":""
            },
            url:'https://api.weibo.com/oauth2/authorize?client_id=1709060029&redirect_uri=http://127.0.0.1:8080/weibo',
            rules:{
              username:[
                { required:true,message:"请输入用户名",trigger:'blur'},
                // { min:3,max:5,message: "长度在 3 到 5 个字符",trigger: "blur"}
              ],
              password:[
                { required:true,message:"密码",trigger:'blur'},

              ]

            }
          }

      },
      methods:{
          login(){
            let form_data = new FormData();
            form_data.append('username',this.user.username);
            form_data.append('password',this.user.password)
            this.axios({
              url:'http://127.0.0.1:8000/login/',
              method:'post',
              data:form_data
            }).then(res=>{
              console.log(res)
              if (res.data.code==200){
                sessionStorage.setItem('uid',res.data.data);
                alert('登录成功')
              }else {
                alert('登录失败')
              }
            })
          }
      }
    }
</script>

<style scoped>
    .el-form{
    width: 300px;
  }

</style>
